<template>
  <div class="app-container">
    <el-dialog :title="titles[flag]" :visible.sync="dialogVisible" width="50%" append-to-body>
      <div class="myTitle">基本信息</div>
      <el-form ref="form" :model="form" :disabled="flag==1">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="工艺编码" prop="flowCode" required>
              <div v-if="flag==1">{{ form.flowCode }}</div>
              <el-input v-else v-model="form.flowCode" placeholder="自动生成" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工艺名称" prop="flowName" required>
              <div v-if="flag==1">{{ form.flowName }}</div>
              <el-input v-else v-model="form.flowName" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用" prop="status" required>
              <dict-tag v-if="flag==1" :options="dict.type.sys_yes_no" :value="form.status"/>
              <el-select v-else v-model="form.status" filterable style="width: 100%">
                <el-option
                  v-for="item in dict.type.sys_yes_no"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="适用商品" prop="productIdList" required>
              <div v-if="flag==1">
                <span v-for="val in form.productNameList">{{val}};</span>
              </div>
              <el-select v-else v-model="form.productIdList" multiple filterable style="width: 100%">
                <el-option
                  v-for="item in goodList"
                  :key="item.id"
                  :label="item.productName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="myTitle">工序信息</div>
      <div v-if="flag!=1">
        <el-button type="primary" plain @click="itemList.push({})">新增</el-button>
        <el-button @click="itemList=[]">清空</el-button>
      </div>
      <el-table
        :data="itemList"
        max-height="500">
        <el-table-column type="index" label="序号" align="center" key="1"/>
        <el-table-column prop="proName" label="工序名称" align="center" v-if="flag!=1" key="2">
          <template slot-scope="scope">
            <el-select v-model="scope.row.processId" filterable style="width: 100%">
              <el-option
                v-for="item in processList"
                :key="item.id"
                :label="item.proName+'（'+item.deptName+'-'+item.proCode+'）'"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="proCode" label="工序编码" align="center" v-if="flag==1" key="3"/>
        <el-table-column prop="proName" label="工序名称" align="center" v-if="flag==1" key="4"/>
        <el-table-column prop="deptName" label="所属部门" align="center" v-if="flag==1" key="5"/>
        <el-table-column prop="userNameList" label="责任人" align="center" v-if="flag==1" key="6">
          <template slot-scope="scope">
            <div>
              <span v-for="val in scope.row.userNameList">{{ val }}；</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" v-if="flag!=1" key="7">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="deleteRow(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="dialogOk" v-if="flag!=1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getCommonCode, listGood} from "../../../api/imsMng";
import {addProduceWork, updateProduceWork, listProduceProcess} from "../../../api/produceMng";

export default {
  dicts: ['ims_receipt_type', 'sys_yes_no'],
  data() {
    return {
      flag: 0,
      titles: ['新增', '详情', '修改'],
      loading: false,
      dialogVisible: false,
      form: {},
      unitList: [],
      processList: [],
      goodList: [],
      itemList: []
    }
  },
  methods: {
    show(flag, form) {
      this.flag = flag
      this.dialogVisible = true
      this.resetForm('form')
      this.form = form
      this.itemList = []
      this.load()
      if (!flag) {
        getCommonCode({orderType: 80}).then(res => {
          this.$set(this.form, 'flowCode', res.data.orderNo)
        })
      } else {
        this.itemList = form.processStepList
      }
    },
    load() {
      listGood({pageNum: 1, pageSize: 10000, productType: 1}).then(res => {
        this.goodList = res.rows
      })
      listProduceProcess({pageNum: 1, pageSize: 10000}).then(res => {
        this.processList = res.rows
      })
    },
    deleteRow(row) {
      this.itemList = this.itemList.filter(val => val != row)
    },
    dialogOk() {
      this.$refs.form.validate(e => {
        if (e) {
          if (!this.flag) {
            let idList = []
            this.itemList.map(val => {
              idList.push(val.processId)
            })
            this.form.processStepIdList = idList
            addProduceWork(this.form).then(res => {
              this.dialogVisible = false
              this.$message.success('新增成功')
              this.$emit('ok')
            })
          } else {
            let idList = []
            this.itemList.map(val => {
              idList.push(val.processId)
            })
            this.form.processStepIdList = idList
            updateProduceWork(this.form).then(res => {
              this.dialogVisible = false
              this.$message.success('修改成功')
              this.$emit('ok')
            })
          }
        }
      })
    },
  }
}
</script>
